<template>
    <div class="vant-table">
        <table cellspacing="0" style="width:100%" class="table">
            <tr>
                <th class="th" v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
            </tr>
            <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
                <td v-for="(context, i) in option.column" :key="i">{{ item[context.prop] }}</td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default {
        props: {
            bgcolor: Object,
            tableData: Array,
            option: Object
        },
        created () {}
    }
</script>

<style lang="less" scoped>
    .vant-table {
        .table {
            .th {
                font-size: 14px;
                font-family: Helvetica, Helvetica-Regular;
                font-weight: 400;
                color: #2d3748;
                height: 38px;
                line-height: 38px;
                background-color: #f5f9f9;
                text-align: center;
            }
            .list-tr {
                width: 60px;
                height: 40px;
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                text-align: center;
                color: #2d3748;
                line-height: 17px;
            }
        }
    }
</style>
